@use "sass:color";

// 主题色
$primary-color: #409EFF;
$success-color: #67C23A;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$info-color: #909399;

// 背景色
$bg-color: #0a1949;
$bg-color-light: color.adjust($bg-color, $lightness: 5%);
$bg-color-dark: color.adjust($bg-color, $lightness: -5%);

// 文字颜色
$text-color: #fff;
$text-color-secondary: rgba(255, 255, 255, 0.7);
$text-color-disabled: rgba(255, 255, 255, 0.4);

// 边框颜色
$border-color: rgba(255, 255, 255, 0.1);
$border-color-light: rgba(255, 255, 255, 0.05);

// 布局尺寸
$header-height: 60px;
$sidebar-width: 220px;
$sidebar-collapsed-width: 64px;

// 间距
$spacing-base: 8px;
$spacing-small: $spacing-base * 0.5;  // 4px
$spacing-medium: $spacing-base * 2;   // 16px
$spacing-large: $spacing-base * 3;    // 24px
$spacing-xlarge: $spacing-base * 4;   // 32px

// 字体大小
$font-size-base: 14px;
$font-size-small: 12px;
$font-size-large: 16px;
$font-size-xlarge: 18px;

// 圆角
$border-radius-base: 4px;
$border-radius-small: 2px;
$border-radius-large: 8px;

// z-index
$z-index-header: 1000;
$z-index-sidebar: 900;
$z-index-modal: 1100;

// 阴影
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.24), 0 0 6px rgba(0, 0, 0, 0.12);

// 过渡
$transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

// 导出变量给 JavaScript 使用
:export {
  menuText: $text-color;
  menuActiveText: $primary-color;
  subMenuActiveText: $primary-color;
  menuBg: $bg-color-dark;
  menuHover: $bg-color-light;
  subMenuBg: $bg-color-dark;
  subMenuHover: $bg-color-light;
  sideBarWidth: $sidebar-width;
}
